<template lang="">
    <div>
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-注册</title>
	<!-- <link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css"> -->
</head>
<body>
	<div class="register_con">
		<div class="l_con fl">
			<a href="index.html" class="reg_logo"><img src="../../static/images/logo.png"></a>
			<div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
			<div class="reg_banner"></div>
		</div>

		<div class="r_con fr">
			<div class="reg_title clearfix">
				<h1>用户注册</h1>
				<a href="login.html">登录</a>
			</div>
			<div class="reg_form clearfix">
				<form method="post" class="register_form" @submit.prevent='reg'>
				<ul>
					<li>
						<label>用户名:</label>
						<input type="text" name="user_name" id="user_name" v-model='form.username' @blur='checkusername'>
						<span class="error_tip" >{{error.username}}</span>
					</li>					
					<li>
						<label>密码:</label>
						<input type="password" name="pwd" id="pwd" v-model='form.password'>
						<span class="error_tip">{{error.password}}</span>
					</li>
					<li>
						<label>确认密码:</label>
						<input type="password" name="cpwd" id="cpwd" v-model='form.repassword'>
						<span class="error_tip">两次输入的密码不一致</span>
					</li>
					<li>
						<label>手机号:</label>
						<input type="text" name="phone" id="phone" v-model='form.mobile'>
						<span class="error_tip">{{error.mobile}}</span>
					</li>
					<li>
                        <label>图形验证码:</label>
                        <input type="text" name="pic_code" id="pic_code" class="msg_input" v-model='picCode'>
					    <div @click='getimagecode'>
								<img :src="imageurl" alt="图形验证码" class="pic_code">
						</div>
						
                        <span class="error_tip">请填写图形验证码</span>
                    </li>
					<li>
						<label>短信验证码:</label>
						<input type="text" name="msg_code" id="msg_code" class="msg_input">
						<a @click='getMsgCode' class="get_msg_code">获取短信验证码</a>
						<span class="error_tip">请填写短信验证码</span>
					</li>
					<li class="agreement">
						<input type="checkbox" name="allow" id="allow" checked="checked" v-model='form.agree' value='1'>
						<label>同意”美多商城用户使用协议“</label>
						<span class="error_tip">请勾选用户协议</span>
					</li>
					<li class="reg_sub">
						<input type="submit" value="注 册">
					</li>
				</ul>				
				</form>
			</div>

		</div>

	</div>

	<div class="footer no-mp">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
    <!-- <script type="text/javascript" src="js/register.js"></script> -->
</body>
</html>
    </div>
</template>
<script>
import '../../static/css/reset.css' 
import '../../static/css/main.css' 
import {v4 as uuid4} from 'uuid'

export default {
    data(){
        return{
            form:{},
			unerror:true,
			error:{'username':''},
			imageurl:'',
			imageuuid:0,
			picCode:''
        }
    },
    methods: {
        //检测用户名
        checkusername(){
            let username = this.form.username
            //5-20个字符的用户
            let ureg = /\w{5,20}$/

            if(username == undefined || username==''|| !ureg.test(username)){
                //提醒请输入5-20位
				this.error.username='请输入5-20个字符的用户'
				return false;
            }else{
                this.error.username=''
            }
            //用户名是否重复
            this.axios.post('users/reg/',{'username':username}).then(res=>{
                if(res.data.code == 10010){
					//提醒请输入5-20位
					this.error.username='请输入5-20个字符的用户'
					return false;
				}
				if(res.data.code == 10011){
					this.error.username='提示已经存在不能注册'
					return false;
				}
			})
		},
		//注册
		reg(){
			this.axios.post('users/reg/',this.form).then(res=>{
				var code = res.data.code
				if(code == 10013){
					alert('两次密码必须一致')
					return false;
				}
				if(code == 10014){
					alert('手机号不合法')
					return false;
				}
				if(code == 10015){
					alert('手机号不能重复')
					return false;
				}
				if(code == 200){
					alert('注册成功')
				}
			})
		},
		getimagecode(){
			this.imageuuid = uuid4()
			this.imageurl = 'http://localhost:8000/users/imageCode/?uuid='+this.imageuuid
		},
		//获取短信验证码
		getMsgCode(){
			//获取用户输入的图片验证码
			var imagecode = this.picCode
			var mobile = this.form.mobile
		
			this.axios.get('users/sendMes/?imagecode='+imagecode+'&mobile='+mobile+'&uuid='+this.imageuuid).then(res=>{
				console.log(res)
			})
		}
	},
	mounted() {
		this.getimagecode()
	},
}
</script>
<style lang="">
    
</style>